@import './font-family.less';

// layout rewrite

.t-layout__sider {
  width: fit-content;
}

.t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}

.t-transfer,
.t-jumper,
.t-pagination-mini {
  .t-button + .t-button {
    margin-left: 0;
  }
}

.@{starter-prefix}-link {
  color: var(--td-brand-color);
  text-decoration: none;
  margin-right: 24px;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}

.left-operation-container,
.operation-container {
  .t-button + .t-button {
    margin-left: var(--td-comp-margin-s);
  }
}

.t-layout.t-layout--with-sider {
  > .t-layout {
    flex: 1;
  }
}

.t-menu--dark .t-menu__operations .t-icon {
  color: rgb(255 255 255 / 55%);

  &:hover {
    cursor: pointer;
  }
}

.t-default-menu {
  background: transparent;
  .t-menu__operations:not(:empty) {
    border-top: none;
    .t-menu__item {
      padding: 0 !important;
    }
  }
  .t-menu__item {
    position: relative;
    width: 60px;
    height: 61px;
    border-radius: var(--td-radius-large);
    padding: 0;
    margin: 0 0 var(--td-comp-margin-xs) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    line-height: 22px;
    font-size: var(--td-font-size-body-small);
    color: var(--td-context-secondary) !important;
    .t-icon {
      font-size: 24px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--td-context-secondary) !important;
    }
    span {
      font-weight: 700;
    }
  }
}

.t-icon + .t-menu__content {
  margin-left: 0;
}

.t-default-menu__inner .t-menu, .t-menu__operations:not(:empty) {
  padding: 0 var(--td-comp-paddingLR-s);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-default-menu.t-menu--dark {
  background: var(--td-gray-color-13);
}

.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
  background-color: var(--td-bg-content-active);
}

.t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not( .t-is-disabled) {
  background-color: var(--td-bg-content-hover);
}

.@{starter-prefix} {
  // 布局元素调整
  &-aside, &-header {
    background: var(--td-bg-aside);
  }

  &-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  &-main-wrapper {
    height: 500px;
    overflow: scroll;
  }

  &-side-nav-layout {
    &-relative {
      height: 100%;
    }
  }

  &-content {
    position: relative;
    height: calc(100vh - 60px);
    overflow: hidden;
    border-radius: var(--td-radius-large);
    background: var(--td-bg-color-container);
    margin: 0 var(--td-comp-margin-xs) var(--td-comp-margin-xs) 0;
  }

  &-component {
    width: 100%;
  }

  &-content-layout {
    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  }

  &-layout {
    overflow-y: scroll;
    &-tabs-nav {
      max-width: 100%;
      position: fixed;
      overflow: visible;
      z-index: 100;
    }
    &-tabs-nav + .@{starter-prefix}-content-layout {
      padding-top: var(--td-comp-paddingTB-xxl);
    }
  }

  &-footer-layout {
    padding: 0;
    margin-bottom: var(--td-comp-margin-xxl);
  }

  // slideBar
  &-sidebar-layout {
    height: 100%;
  }

  &-block-column {
    width: 100% !important;
  }

  &-sidebar-compact {
    width: 80px;
  }

  &-sidebar-layout-side {
    z-index: 100;
  }

  &-side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 200;
    transition: all 0.3s;
    min-height: 100%;

    &-mix {
      top: var(--td-comp-size-xxxl);

      &-fixed {
        top: var(--td-comp-size-xxxl);
        z-index: 0;
      }
    }

    &-no-fixed {
      position: relative;
      z-index: 1;
    }

    &-no-logo {
      z-index: 1;
    }

    &-logo-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      &:hover {
        cursor: pointer;
      }
    }

    &-logo-t-logo {
      height: 32px;
      width: 100%;
    }

    &-logo-tdesign-logo {
      padding: 0 24px;
      height: 32px;
      width: 100%;
      color: var(--td-text-color-primary);
    }

    &-logo-normal {
      color: var(--td-brand-color);
      font: var(--td-font-body-large);
      transition: all 0.3s;
    }
  }

  &-side-nav-placeholder {
    flex: 1 1 232px;
    min-width: 232px;
    transition: all 0.3s;

    &-hidden {
      flex: 1 1 72px;
      min-width: 72px;
      transition: all 0.3s;
    }
  }
}

.route-tabs-dropdown {
  .t-icon {
    margin-right: 8px;
  }
}

.logo-container {
  cursor: pointer;
  display: inline-flex;
  height: 64px;
  margin-left: 24px;
}

.version-container {
  color: var(--td-text-color-primary);
  opacity: 0.4;
}

.t-menu__popup {
  z-index: 1000;
}

.container-base-margin-top {
  margin-top: 16px;
}

.t-back-top--theme-light {
  border: none ;
}

.t-dialog--default {
  .t-dialog__body {
    padding: var(--td-comp-paddingTB-l) var(--td-size-1) 0 var(--td-size-1);
    .t-radio-group__header {
      position: absolute;
      left: calc(var(--td-comp-paddingLR-xxl) + 40px);
      top: calc(var(--td-comp-paddingTB-xxl) - 0.1rem);
    }
    .t-form__item {
      margin-bottom: var(--td-comp-margin-l);
    }
    .t-radio-group {
      margin-bottom: var(--td-comp-margin-s);
    }
    .t-textarea{
      .t-textarea__inner {
        border: var(--td-size-1) solid transparent;
        background-color: var(--td-bg-content-input);
        border-radius: var(--td-radius-medium);
      }
    }
    .dialog-container-padding {
      padding: var(--td-size-1);
      .tip {
        color: var(--td-gray-color-6);
        font-size: var(--td-font-size-link-small);
      }
      .bottom-tip {
        position: absolute;
        bottom: calc(var(--td-comp-paddingTB-xxl) + 8px);
      }
      .optios {
        margin-top: var(--td-comp-margin-s);
      }
    }
  }
  border: none;
  background-color: var(--td-bg-color-page);
  box-shadow: var(--td-shadow-3);
}

.t-tabs__header {
  .t-tabs__nav-container.t-is-top:after {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  // .t-tabs__bar.t-is-top {
  //   width:15px !important;
  //   left: 50% !important;
  //   transform: translate(-50%, 0);
  // }
  .t-tabs__nav-item {
    --ripple-color: transparent;
    &:not(.t-is-disabled):not(.t-is-active):hover {
      color: var(--td-brand-color);
      .t-tabs__nav-item-wrapper {
        background-color: transparent;
      }
    }
  }
  .t-tabs__nav-item-wrapper {
    --ripple-color: transparent;
  }
  .t-tabs__nav-item-text-wrapper {
    font-weight: 700;
  }
  .t-tabs__btn {
    border: 0;
    background-color: var(--td-bg-color-container);
    &:hover > svg {
      color: var(--td-brand-color);
    }
  }
  .t-tabs__operations--left, .t-tabs__operations--right {
    .t-tabs__btn:first-child {
      box-shadow: none;
    }
  }
}

.t-dropdown {
  border: none !important;
}

.t-popup__content {
  background-color: var(--td-bg-popup);
}

.t-form__controls-content{
  padding: var(--td-size-1);
  .t-input {
    background-color: var(--td-bg-content-input) !important;
    border-color: transparent;
  };
}

.t-message {
  border-radius: 50px;
}

.t-tag-input .t-tag {
  background-color: var(--td-context-quarternary);
}

.search {
  display: flex;
  align-items: center;
  .search-bar {
    width: 146px;
    .t-input {
      border-style: none !important;
      background-color: var(--td-bg-content-input) !important;
      border-radius: var(--td-radius-medium) !important;
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: var(--td-scrollbar-color);
}

:root[theme-mode='dark'] {
  --td-bg-aside: #171717;
  --td-bg-color-container: #1e1e20;
  --td-bg-content-active: #343436;
  --td-bg-content-hover: #3b3b3d;
  --td-bg-popup: #303032;
  --td-bg-content-input: #424041;
  --td-context: 255, 255, 255;
  --td-context-primary: rgb(var(--td-context));
  --td-context-secondary: rgba(var(--td-context), 0.72);
  --td-context-tertiary: rgba(var(--td-context), 0.36);
  --td-context-quarternary: rgba(var(--td-context), 0.18);
  --theme-svg-fill-color: #fff;
  --theme-background-color: rgb(255 255 255 / 12%);
}

:root,
:root[theme-mode="light"] {
  --td-bg-aside: #f2f3f5;
  --td-bg-color-container: #fbfbfb;
  --td-bg-color-page: #fff;
  --td-bg-content-active: #dfdfdf;
  --td-bg-content-hover: #e6e6e6;
  --td-bg-popup: #f7f7f7;
  --td-bg-content-input: #e5e5e5;
  --td-context: 37, 38, 43;
  --td-context-primary: rgb(var(--td-context));
  --td-context-secondary: rgba(var(--td-context), 0.72);
  --td-context-tertiary: rgba(var(--td-context), 0.36);
  --td-context-quarternary: rgba(var(--td-context), 0.18);
  --theme-svg-fill-color: #222;
  --theme-background-color: rgb(0 0 0 / 12%);
}